<template>
  <div class="login">
    <el-form class="form" :model="form" :rules="rules" ref="form">
      <img src="../../assets/common/login-logo.png" />
      <el-form-item prop="mobile">
        <el-input
          placeholder="请输入账号"
          v-model="form.mobile"
          prefix-icon="el-icon-user-solid"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="请输入密码"
          type="password"
          v-model="form.password"
          prefix-icon="el-icon-unlock"
          @keyup.enter.native="submit"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入登录请求
// import { sysLogin } from '@/api/user.js'
import { mapActions } from 'vuex'
// 导入手机验证正则
import { phone } from '@/utils/validate.js'
export default {
  data () {
    return {
      form: {
        mobile: 13600000002,
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              phone(value)
                ? callback()
                : callback(new Error('请输入正确的手机号'))
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '请输入6-16位的密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    ...mapActions('user', ['getUserToken']),
    submit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 验证通过
          // const res = await sysLogin(this.form)
          // 使用await是为了保证执行完await之后的再继续执行下面的
          await this.getUserToken(this.form)
          const _redircet = this.$route.query.redirect
          if (_redircet) {
            this.$router.push(_redircet)
          } else {
            this.$router.push('/')
          }
          // console.log(res)
        } else {
          // 验证不通过
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(~@/assets/common/login.jpg);

  .form {
    text-align: center;
    width: 500px;
    .btn {
      width: 100%;
      background-color: #407ffe;
      color: #fff;
      border: none;
    }
    img {
      margin-bottom: 20px;
    }
    ::v-deep .el-form-item__error {
      color: #fff;
    }
  }
}
</style>
